<template>
    <el-container class="app-container" v-loading="loading">
        <el-header class="list-title" style="height: auto;">
              <span>
                机柜:{{ruleForm.rackNumber||'-'}}
              </span>
              <span>
                资产编号:{{ruleForm.assetNumber||'-'}}({{ruleForm.ip}})
              </span>
        </el-header>
        <el-main>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" size="medium">
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="设备状态">
                            <span style="padding-right: 25px;" v-html="stateHTML" >
                            </span>
                            <el-button @click="handleOn" type="success" size="mini" v-if="ruleForm.machineType==='服务器'">开 机</el-button>
                            <el-button @click="handleDown" type="danger" size="mini" v-if="ruleForm.machineType==='服务器'">关 机</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="设备高度" prop="height" >
                            <label >{{ruleForm.height}}</label>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="机柜编号" prop="rackNumber">
                            <el-input v-model="ruleForm.rackNumber" disabled="disabled"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="资产编号" prop="assetNumber" disabled="disabled">
                            <el-input v-model="ruleForm.assetNumber" disabled="disabled"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="设备IP" prop="ip" v-if="ruleForm.machineType==='服务器'">
                            <el-input v-model="ruleForm.ip" disabled="disabled"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="MAC地址" prop="mac" v-if="ruleForm.machineType==='服务器'">
                            <el-input v-model="ruleForm.mac" disabled="disabled">
                                <el-button slot="append" @click="getMac">获取mac</el-button>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="资产类型" prop="type">
                            <el-select v-model="ruleForm.type" placeholder="资产类型" disabled="disabled">
                                <el-option label="固定资产" value="固定资产"></el-option>
                                <el-option label="内部借用" value="内部借用"></el-option>
                                <el-option label="其他" value="其他"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="设备类型" prop="machineType">
                            <el-select v-model="ruleForm.machineType" placeholder="设备类型"  disabled="disabled">
                                <el-option label="服务器" value="服务器"></el-option>
                                <el-option label="交换机" value="交换机"></el-option>
                                <el-option label="防火墙" value="防火墙"></el-option>
                                <el-option label="KVM" value="KVM"></el-option>
                                <el-option label="监控" value="监控"></el-option>
                                <el-option label="其他设备" value="其他设备"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="ruleForm.machineType==='服务器'">
                    <el-col :span="11" >
                        <el-form-item label="端口号" prop="sshPort" >
                            <el-input v-model="ruleForm.sshPort" disabled="disabled">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="设备高度" prop="height" >
                            <el-select v-model="ruleForm.height" placeholder="设备高度"  disabled="disabled">
                                <el-option label="1U" value="1U"></el-option>
                                <el-option label="2U" value="2U"></el-option>
                                <el-option label="3U" value="3U"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="ruleForm.machineType==='服务器'">
                    <el-col :span="11">
                        <el-col   v-if="ruleForm.runTime!==24" :key="ruleForm.runTime!==24">
                            <el-form-item label="用户名" prop="osUser">
                                <el-input v-model="ruleForm.osUser"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col  v-else>
                            <el-form-item label="用户名" :key="ruleForm.runTime">
                                <el-input v-model="ruleForm.osUser"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-col>

                    <el-col :span="11">
                        <el-col   v-if="ruleForm.runTime!==24" :key="ruleForm.runTime!==24">
                            <el-form-item label="密码" prop="osPass">
                                <el-input
                                        type="password"
                                        auto-complete="off"
                                        v-model.trim="ruleForm.osPass"
                                        placeholder="请输入原密码"
                                        onpaste="return false"
                                        onselectstart="return false"
                                        v-filterSpecialChar
                                ></el-input>
                            </el-form-item>


                        </el-col>
                        <el-col  v-else :key="ruleForm.runTime!==24">
                            <el-form-item label="密码" >
                                <el-input
                                        type="password"
                                        auto-complete="off"
                                        v-model.trim="ruleForm.osPass"
                                        placeholder="请输入原密码"
                                        onpaste="return false"
                                        onselectstart="return false"
                                        v-filterSpecialChar
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="所属部门" prop="rackDept">
                            <el-input v-model="ruleForm.rackDept"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="负责人" prop="responsible">
                            <el-input v-model="ruleForm.responsible"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="负责人电话" prop="phone">
                            <el-input v-model="ruleForm.phone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="设备用途" prop="usage">
                            <el-input v-model="ruleForm.usage"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row v-if="ruleForm.machineType==='服务器'">

                    <el-col :span="11">
                        <el-form-item label="开关机时间" prop="runTime" >
                            <el-select v-model="ruleForm.runTime" @change="changeRunTime">
                                <el-option label="9H" :value="9"></el-option>
                                <el-option label="12H" :value="12"></el-option>
                                <el-option label="永不关机" :value="24"></el-option>
                                <el-option label="自定义" :value="-1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11" v-if="ruleForm.runTime===-1">
                        <el-form-item label="自定义时间" required>
                            <div style="display: inline-block;width: 178px;" >
                                <el-form-item prop="startOnTime">
                                    <el-select v-model="ruleForm.startOnTime" placeholder="起始时间" @change="changeTimes">
                                        <el-option
                                                v-for="item in onTimes"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value"
                                                :disabled="item.disabled">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                            <div style="display: inline-block;">-</div>
                            <div style="display: inline-block;width: 178px;">
                                <el-form-item prop="shutdownTime">
                                    <el-select v-model="ruleForm.shutdownTime" placeholder="结束时间">
                                        <el-option
                                                v-for="item in downTimes"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value"
                                                :disabled="item.disable">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="上架时间" prop="putaway">
                            <el-date-picker
                                    v-model="ruleForm.putaway"
                                    type="date"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                                    placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="下架时间" prop="removeTime">
                            <el-date-picker
                                    v-model="ruleForm.removeTime"
                                    type="date"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                                    placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="22">
                        <el-form-item label="备 注" prop="">
                            <el-input v-model="ruleForm.remark" type="textarea" rows="5"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="24" style="text-align: center;">
                        <el-form-item>
                            <el-button @click="handleSave" type="primary" size="small">保 存</el-button>
                            <el-button @click="handleBack" size="small">返 回</el-button>
                        </el-form-item>

                    </el-col>

                </el-row>

            </el-form>

        </el-main>
    </el-container>
</template>
<script>
import Rules from '@/util/customRules';

export default {
  name: 'Config',
  components: {},
  data() {
    return {
      stateHTML: '-',
      downTimes: [],
      onTimes: [],
      ruleForm: {
        id: null,
        rackNumber: null,
        pwIsExist: null,
        assetNumber: null,
        osUser: null,
        osPass: null,
        ip: null,
        mac: null,
        sshPort: null,
        type: null,
        machineType: null,
        state: 0,
        height: '2U',
        runTime: 9,
        rackDept: null,
        responsible: null,
        phone: null,
        usage: null,
        startOnTime: null,
        shutdownTime: null,
        putaway: null,
        removeTime: null,
        remark: null,
      },
      rules: {
        rackNumber: [
          { required: true, message: '请输入机柜编号', trigger: 'blur' }
        ],
        assetNumber: [
          { required: true, message: '请输入资产编号', trigger: 'blur' }
        ],
        ip: [
          { required: true, message: '请输入IP地址', trigger: 'blur' },
          { validator: Rules.IP, trigger: 'blur' },
        ],
        mac: [
          { required: true, message: '请输入Mac地址', trigger: 'blur' },
          { validator: Rules.MAC, trigger: 'blur' },
        ],
        type: [
          { required: true, message: '请输入设备类型', trigger: 'blur' }
        ],
        usage: [
          { required: true, message: '请输入设备用途', trigger: 'blur' }
        ],
        startOnTime: [

          {
            validator: (rule, value, callback) => {
              if (this.ruleForm.startOnTime===null||!this.ruleForm.shutdownTime===null) {
                callback(new Error('请输入结束运行时间'));
              } else {
                this.$refs.ruleForm.clearValidate('startOnTime');
                this.$refs.ruleForm.clearValidate('shutdownTime');
                callback();
              }
            }, trigger: 'change'
          }
        ],
        shutdownTime: [
          {
            validator: (rule, value, callback) => {
              if (this.ruleForm.startOnTime===null||!this.ruleForm.shutdownTime===null) {
                callback(new Error('请输入开始运行时间'));
              } else {
                this.$refs.ruleForm.clearValidate('startOnTime');
                this.$refs.ruleForm.clearValidate('shutdownTime');
                callback();
              }
            }, trigger: 'change'
          }
        ],
        rackDept: [
          { required: true, message: '请输入所属部门', trigger: 'blur' }
        ],
        osUser: [{ required: true, message: '请输入系统用户', trigger: 'blur' }],
        osPass: [{ required: true, message: '请输入系统密码', trigger: 'blur' }],
        verifyPassword: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请再次输入密码'));
              } else if (value !== this.ruleForm.osPass) {
                callback(new Error('两次输入密码不一致!'));
              } else {
                callback();
              }
            }, trigger: 'blur'
          },
        ],
        remark: [
          // {
          //   min: 1,
          //   max: 200,
          //   message: "不超过200个字",
          //   trigger: "blur"
          // },
          { validator: Rules.validresMask, trigger: 'blur' },
        ],
      },
      rackNumber: [],
      loading: false,
    }
  },
  props: ['params'],
  watch: {
    params: {
      handler(val, o) {
        if (val) {

        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    overState() {
      this.stateHTML = this.ruleForm.state === 0 ? '<span style=\'color:#67C23A;\'>开机</span>' : '<span style=\'color:red;\'>关机</span>';
    },
    handleOn(row) {
      this.$confirm('确定要开机？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        this.switchMachine();
      })
    },
    handleDown() {
      this.$confirm('确定要关机？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        if (!this.ruleForm.pwIsExist) {
          if (this.ruleForm.osUser&&this.ruleForm.osPass) {
            this.offMachine();
          } else {
            this.$message({
              message: '请输入用户名和密码！',
              type: 'error'
            });
          }


        } else {
          this.offMachine();
        }
      })
    },
    offMachine(call) {
      this.loading = true;
      this.$axiosInstance({
        method: 'get',
        url: '/offMachine',
        params: {
          id: this.ruleForm.id,
          isSave: false,
          osUser: this.ruleForm.osUser,
          osPass: this.ruleForm.osPass
        }
      })
        .then(result => {
          if (result.data.code === 200) {
            this.$message({
              message: result.data.message,
              type: 'success'
            });
            this.loadData();
          } else {
            this.$message({
              message: result.data.message,
              type: 'error'
            });
          }
          this.loadData();
          this.loading = false;
          if (call) call();
        })
        .catch(() => {
          this.loading = false;
          if (call) call();
        });
    },
    switchMachine(call) {
      this.loading = true;
      this.$axiosInstance({
        method: 'get',
        url: '/onMachine',
        params: {
          id: this.ruleForm.id,
        }
      })
        .then(result => {
          if (result.data.code === 200) {
            this.$message({
              message: result.data.message,
              type: 'success'
            });
            this.loadData();
          } else {
            this.$message({
              message: result.data.message,
              type: 'error'
            });
          }
          this.loadData();
          this.loading = false;
          if (call) call();
        })
        .catch(() => {
          this.loading = false;
          if (call) call();
        });
    },
    handleSave() {
      this.save((res) => {
        let { code, data } = res.data;
        if (code === 200) {
          this.back();
        } else {
          this.$message({
            message: res.data.message,
            type: 'error'
          });
        }
      })
    },
    save(call) {
      this.$refs['ruleForm'].validate((v) => {
        if (v) {
          this.loading = true;
          this.$axiosInstance({
            method: 'post',
            url: '/addMachine',
            data: {
              ...this.ruleForm
            }
          }).then((res) => {
            call(res);
            this.loading = false;
          }).catch((err) => {
            this.loading = false;
          })
        }
      });
    },
    loadrackNumber() {
      this.$axiosInstance({
        method: 'get',
        url: 'rack/getRackNumber',
      })
        .then(result => {
          let { data, code } = result.data;
          if (code === 200) {
            this.rackNumber = data.dataInfo;
          } else {
            this.$message({
              message: result.data.message,
              type: 'error'
            });
          }
        })
        .catch(() => {
        });

    },
    getMac() {
      if (!this.ruleForm.ip) {
        this.$message({
          message: '请先输入IP！',
          type: 'error'
        });
        return;
      }
      this.$axiosInstance({
        method: 'get',
        url: '/getMac',
        params: {
          ip: this.ruleForm.ip
        }
      })
        .then(result => {
          let { data, code } = result.data;
          if (code === 200) {
            this.ruleForm.mac = data;
          } else {
            this.$message({
              message: result.data.message,
              type: 'error'
            });
          }
        })
        .catch(() => {
        });
    },
    handleBack() {
      this.$confirm(
        ('修改') +
                '操作尚未保存，是否确认退出？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        this.back();
      })
    },
    back() {
      this.$emit('close');
    },
    changeRunTime() {
      this.ruleForm.startOnTime=null;
      this.ruleForm.shutdownTime=null;
    },
    changeTimes(v) {
      for (let i = 0; i < this.downTimes.length; i++) {
        let b = false;
        if (this.downTimes[i].value<v) {
          b = true;
        } else {
          b = false;
        }
        this.$set(this.downTimes[i], 'disable', b);
      }
      this.ruleForm.shutdownTime =null;
    },
    loadData() {
      if (!this.params) return;
      if (!this.params.id) return;
      this.loading = true;
      this.$axiosInstance({
        method: 'get',
        url: '/getMachine',
        params: {
          id: this.params.id
        }
      }).then((res) => {
        let { code, data } = res.data;
        if (code === 200) {
          for (let k in data) {
            if (k === 'osPass' || !data[k]) {
              continue;
            }
            this.ruleForm[k] = data[k];
          }
          this.overState();
        }
        this.loading = false;
      }).catch((err) => {
        this.loading = false;
      })
    }
  },

  mounted() {
    let t=[];
    let o =[];
    for (let i = 0; i <24; i++) {
      t.push({
        label: String('0'.repeat(2) + i).slice(-2)+':00',
        value: i,
        disable: false
      });
      o.push({
        label: String('0'.repeat(2) + i).slice(-2)+':00',
        value: i,
        disable: false
      })
    }
    this.downTimes = [].concat(t);
    this.onTimes = [].concat(o);
    this.loadrackNumber();
    this.loadData();
    this.$nextTick(() => {

    })
  }
}
</script>
<style lang="less" scoped>
    .el-container .list-title {
        height: auto;
        padding: 0px 5px 25px;
        font-size: 20px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        span{
            padding-right: 25px;
        }
    }
</style>
